<script lang="ts" setup>
import { LocalArticleStoreArrType } from "@/typing";
import { ref } from "vue";
import { useRouter } from 'vue-router'
import { localStoriesStore, userLocalStoriesStore } from "../../store";
import { Toast } from 'vant';
import 'vant/es/toast/style';

const router = useRouter()
const userStore = userLocalStoriesStore();
const { updateIsShowUser } = userStore;

const localStore = localStoriesStore();
const { getArticleCollectList } = localStore;

const collectList = ref<LocalArticleStoreArrType>();

Toast.loading({
    message: '正在加载...',
    forbidClick: true,
});

render(8);

function render(num: number) {
    collectList.value = getArticleCollectList(num);
}

function goBackFunc() {
    updateIsShowUser(false);
    router.push({ name: 'user' });
}
</script>

<template>
    <div class="h-screen bg-white">
        <div class="p-5 flex items-center bg-white border-b mb-3">
            <img class="w-6 h-10" src="@/assets/card/h5_qr_back.png" alt="back" @click="goBackFunc">
            <div class="text-center text-2xl w-11/12 ">ONE电台收藏</div>
        </div>

        <img v-show="(collectList?.length == 0 || collectList == undefined)" class="w-64 mt-32 ml-48"
            src="@/assets/user/no_stow_pic.png" alt="img">
        <div v-show="(collectList?.length != 0)">
            <div v-for="l in collectList" :key="l.id" class="flex mx-8 py-3 mb-3 items-center">
                <img class="user-radio-img" :src="l.img_url" alt="img">
                <div>
                    <div class="text-2xl mb-4 font-bold">{{ l.title }}</div>
                    <div class="text-gray-400">{{ l.subTitle }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
.user-radio-img {
    object-fit: cover;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    margin-right: 15px;
}
</style>